<template>
  <el-dialog @closed="endImportData" :title="title" :visible.sync="visible" :width="width" top="5vh" append-to-body>
    <div class="import-data-body">
      <div class="import-file" @click="uploadFile">
        <i class="el-icon-upload"></i>
      </div>
      <div class="hint">
        <span class="hint-txt" v-if="hintFileName != ''">{{ `请上传${hintFileName},` }}</span>
        <span class="download-txt" @click="downloadTemplateFile">下载模板</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="endImportData">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
import {UploadFileObj} from "@/utils/uploadFile";
import {exportFile} from "@/utils/exportFile";
import {FILE_TYPE} from "@/constantData";

export default {
  props: {
    title: {
      type: String,
    },
    width: {
      type: String,
      default: '500px'
    },
    hintFileName: {
      type: String,
      default: ''
    },
    uploadFileType: {
      type: String,
      default: FILE_TYPE.EXCEL,
    }
  },
  data() {
    return {
      visible: false,
      uid: '',
      downloadFileUrl: ''
    }
  },
  methods: {
    startImportData(uid, downloadFileUrl) {
      this.setCurrentFileUid(uid);
      this.setDownloadFileUrl(downloadFileUrl)
      this.openUploadDialog()
    },
    endImportData() {
      this.setCurrentFileUid('');
      this.setDownloadFileUrl('');
      this.closeUploadDialog()
    },
    setCurrentFileUid(uid) {
      this.uid = uid
    },
    setDownloadFileUrl(downloadFileUrl) {
      this.downloadFileUrl = downloadFileUrl
    },
    openUploadDialog() {
      this.visible = true
    },
    closeUploadDialog() {
      this.visible = false
    },
    uploadFile() {
      let {uid} = this
      if (uid == null || uid === '') {
        this.$message.error('未传入uid');
        return
      }
      let uploadObj = UploadFileObj.getInstance();
      uploadObj.uploadFile('temporaryFile/addDoc', {uid})
    },
    downloadTemplateFile() {
      let {downloadFileUrl: path, hintFileName, uploadFileType} = this
      if (path == null || path === '') {
        this.$message.error('未传入下载路径');
        return
      }
      let exportConfig = this.getExportFileConfigByFileType(path, hintFileName, uploadFileType)
      exportFile(exportConfig).then(res => {
        this.$message.success('导出成功')
      })
    },
    getExportFileConfigByFileType(path, hintFileName, uploadFileType) {
      let minType = '';
      let fileName = '';
      switch (uploadFileType) {
        case FILE_TYPE.EXCEL:
          minType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
          fileName = `${hintFileName}模板.xls`;
          break;
        case FILE_TYPE.RAR:
          minType = 'application/x-zip-compressed';
          fileName = `${hintFileName}模板.zip`;
          break;
      }
      return {
        path,
        fileType: minType,
        fileName: fileName,
        method: 'get'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.import-data-body {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;

  .import-file {
    width: 100%;
    height: 180px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-sizing: border-box;
    border: 1px dashed #d9d9d9;
    font-size: 67px;
    color: #c0c4cc;
  }

  .hint {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .download-txt {
      color: $bt-color;
      cursor: pointer;
    }
  }
}
</style>
